<!-- todo: create a header directive -->
<div class="col-md-12">
  <div class="row">
    <div class="col-md-6">
      <h4>
        Worker
        <indicator condition="{{worker.isHealthy?'good':'concern'}}"
                   tooltip="{{worker.state}}"></indicator>
      </h4>
      <h5>
        <span ng-bind="worker.jvmName"></span>
        <remark tooltip="PID: {{worker.jvm.pid}} Hostname: {{worker.jvm.hostname}}"></remark>
      </h5>
    </div>
    <div class="col-md-2 col-sm-3 col-xs-6">
      <metrics
        caption="Up Time"
        help="Running for {{worker.aliveFor|duration}}"
        value="{{(worker.aliveFor / 1000 / 3600).toFixed(0)}}" unit="hr"></metrics>
    </div>
    <div class="col-md-2 col-sm-3 hidden-xs">
      <metrics
        caption="Slots Usage"
        help="Slot is a minimal compute unit. The usage indicates the computation capacity."
        value="{{worker.slots.usage|number:1}}" unit="%"></metrics>
    </div>
    <div class="col-md-2 col-sm-3 hidden-xs">
      <metrics value="{{worker.executors.length}}" unit="executor"></metrics>
      <metrics value="{{appsCount}}" unit="application"></metrics>
    </div>
  </div>
  <hr/>
</div>

<div class="col-md-6">
  <property-table
    caption="Overview"
    props-bind="overviewTable"
    prop-name-class="col-sm-4 bold"
    prop-value-class="col-sm-8 actor-path">
  </property-table>

  <sortable-table
    caption="Executors"
    columns-bind="executorsTable.cols"
    records-bind="executorsTable.rows"
    pagination="4">
  </sortable-table>
</div>

<div class="col-md-6">
  <div ng-include src="'views/jvm/metrics_charts.html'"
       ng-controller="JvmMetricsChartsCtrl"></div>
</div>